<script setup lang="ts" name="Lock">
import { useLockStore, useUserStore } from '@/store'
import { useNow } from './useNow'

const showPwd = ref<boolean>(false)
const state = reactive({
	pwd: '',
	isShow: false
})
const { hour, month, minute, meridiem, year, day, week } = useNow(true)
const { logout } = useUserStore()
const { unLock } = useLockStore()
const onUnLock = () => {
	unLock(state.pwd)
}
const onBackLogin = async () => {
	await logout(true)
}
const onShowLcokPwd = () => {
	state.isShow = !state.isShow
	state.pwd = ''
}
</script>

<template>
	<div class="relative h-screen w-screen overflow-hidden flex flex-col bg-black color-light">
		<div
			class="left-0 top-0 absolute z-20 h-screen w-screen flex flex-col items-center justify-center"
			style="background-color: #00000080; backdrop-filter: blur(8px)"
			v-if="state.isShow"
		>
			<div style="width: 280px">
				<el-input v-model="state.pwd" :type="showPwd ? 'text' : 'password'" placeholder="请输入密码" clearable>
					<template #suffix>
						<el-icon @click="showPwd = !showPwd" class="cursor-pointer">
							<SvgIcon name="ep:view" v-if="showPwd" />
							<SvgIcon name="nimbus:eye-off" v-else />
						</el-icon>
					</template>
				</el-input>
				<div class="m-t-20px flex justify-between">
					<span class="cursor-pointer" @click="onShowLcokPwd">返回</span>
					<span class="cursor-pointer" @click="onBackLogin">返回登录</span>
					<span class="cursor-pointer" @click="onUnLock">进入系统</span>
				</div>
			</div>
		</div>
		<div class="h-120px flex items-center justify-center">
			<div class="flex flex-col items-center justify-center text-2xl cursor-pointer" @click="onShowLcokPwd">
				<el-icon><SvgIcon name="ep:lock" /></el-icon>
				<span class="m-t-5px">点击解锁</span>
			</div>
		</div>
		<div class="flex-1 flex">
			<div class="relative flex-1 flex items-center justify-center text-60 m-l-150px m-r-50px bg-dark rd-30px">
				<span>{{ hour }}</span>
				<span class="meridiem absolute z-10 left-10 top-10 text-2xl">
					{{ meridiem }}
				</span>
			</div>
			<div class="relative flex-1 flex items-center justify-center text-60 m-l-50px m-r-150px bg-dark rd-30px">
				<span> {{ minute }}</span>
			</div>
		</div>
		<div class="h-120px flex items-center justify-center">
			<div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
		</div>
	</div>
</template>

<style scoped></style>
